<template>
  <div>
    <section class="app-sidebar">
      <ul class="menu-list">
        <li>
          <a>频道分组</a>
          <expanding>
            <ul>
              <li v-for="(item, index) in programList" v-if="item.program">
                <a>{{ item.program }}</a>
              </li>
            </ul>
          </expanding>
        </li>
      </ul>
    </section>
    <section class="main">
      <div class="tile is-ancestor">
        <div class="tile is-parent">
          <article class="tile is-child">

            <div class="control is-grouped">
              <p class="control has-addons" align="right">
                <input class="input" v-model="finded" type="text" placeholder="频道名">
                <a class="button is-info" @click="">
                  <i class="fa fa-search"></i>
                </a>
              </p>
              <p class="control has-addons">
                <button class="button is-primary" @click="openAddModal"><span class="icon is-small"><i class="fa fa-plus"></i></span></button>
              </p>
              <p class="control has-addons">
                <button class="button is-primary" @click="openDelModal"><span class="icon is-small"><i class="fa fa-remove"></i></span></button>
              </p>
            </div>
            <table class="table is-bordered">
              <thead>
              <tr>
                <th>
                  <p class="control">
                    <label class="checkbox">
                      <input type="checkbox" v-model="checkAll" @click="checkedAll">
                      频道名
                    </label>
                  </p>
                </th>
                <th>类型</th>
                <th>URL</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in programList">
                <td>
                  <p class="control">
                    <label class="checkbox">
                      <input type="checkbox" v-model="ischecked" :value="item.program">
                      {{item.program}}
                    </label>
                  </p>
                </td>
                <td>
                  {{item.type}}
                </td>
                <td>
                  {{item.url}}
                </td>
              </tr>
              </tbody>
            </table>
          </article>
        </div>
      </div>
      <delm :visible="showDelModal" @close="closeDelModal" @del="delProgramList(ischecked)"></delm>
      <add :visible="showAddModal" @close="closeAddModal"></add>
    </section>
  </div>
</template>

<script>
  import Expanding from 'vue-bulma-expanding'
  import Delm from '../common/DelModal'
  import Add from './AddModal'
  import { mapGetters, mapActions } from 'vuex'

  export default {
    components: {
      Expanding,
      Delm,
      Add
    },

    data () {
      return {
        showDelModal: false,
        showAddModal: false,
        finded: '',
        ischecked: [],
        checkAll: false
      }
    },

    methods: {
      ...mapActions(
        ['delProgramList']
      ),
      generatePath (item, subItem) {
        return `${item.component ? item.path + '/' : ''}${subItem.path}`
      },
      checkedAll () {
        let ischeched = []
        if (this.checkAll) {
          this.programList.forEach(item => {
            ischeched.push(item.program)
          })
        }
        this.ischecked = ischeched
      },
      closeDelModal () {
        this.showDelModal = false
      },
      closeAddModal () {
        this.showAddModal = false
      },
      openDelModal () {
        this.showDelModal = true
      },
      openAddModal () {
        this.showAddModal = true
      }
    },
    computed: {
      ...mapGetters(['programList'])
    },
    created () {
      this.$store.dispatch('getProgramList')
    },

    mounted () {
    }
  }
</script>

<style lang="scss" scoped>

  .is-grouped {
    justify-content: flex-end;
  }

  .has-addons {
    justify-content: flex-end;
  }

  .table th {
    text-align: center;
  }
.tile.is-child {
  padding: 1.25rem;
}
  .control {
    text-align: center;
  }
  .app-sidebar {
    position: fixed;
    top: 49px;
    left: 0;
    bottom: 0;
    padding: 20px 0 50px;
    width: 180px;
    min-width: 45px;
    max-height: 100vh;
    height: calc(100% - 49px);
    z-index: 1024 -1;
    background: #FFF;
    box-shadow: 0 2px 3px rgba(17, 17, 17, 0.1), 0 0 0 1px rgba(17, 17, 17, 0.1);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .menu-list {
    li a {
      &[aria-expanded="true"] {
        .is-angle {
          transform: rotate(180deg);
        }
      }
    }
    li a + ul {
      margin: 0 10px 0 15px;
    }
  }
  .main {
    position: fixed;
    bottom: 0;
    width: calc(100% - 180px);
    padding-top: 49px;
    margin-left: 180px;
    transform: translate3d(0, 0, 0);
    max-height: 100vh;
    height: calc(100%);
    z-index: 1024 - 1;
    background: #FFF;
    box-shadow: 0 2px 3px rgba(17, 17, 17, 0.1), 0 0 0 1px rgba(17, 17, 17, 0.1);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .modal {
    z-index: 1086;
  }
</style>
